<template>
  <div
    id="containerBox"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-card class="box-card">
      <bread-crumb></bread-crumb>
      <div id="titleBox">学生信息查询</div>
      <!-- 表单区域 -->
      <div class="formTable">
        <el-form :inline="true" ref="form" :model="infos" label-width="90px">
          <el-row>
            <el-form-item label="学生姓名">
              <el-input v-model="infos.studentName" placeholder="请填写学生姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="所属班主任">
              <el-input v-model="infos.teacher" placeholder="请填写学生班级" clearable></el-input>
            </el-form-item>
            <el-form-item label="学生家长">
              <el-input v-model="infos.studentPatriarch" placeholder="请填写学生家长" clearable></el-input>
            </el-form-item>
            <el-form-item label="家庭地址">
              <el-input v-model="infos.studentAdress" placeholder="请填写学生家庭地址" clearable></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="年龄">
              <el-input v-model="infos.studentAge" placeholder="请填写学生年龄" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="infos.studentGender" placeholder="请选择学生性别" clearable>
                <el-option label="男生" value="man"></el-option>
                <el-option label="女生" value="women"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年级">
              <el-select v-model="infos.studentGrade" placeholder="请选择学生年级" clearable>
                <el-option label="一年级" value="man"></el-option>
                <el-option label="二年级" value="women"></el-option>
                <el-option label="三年级" value="women"></el-option>
                <el-option label="四年级" value="women"></el-option>
                <el-option label="五年级" value="women"></el-option>
                <el-option label="六年级" value="women"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-form-item>
            <el-button class="onSubmit" type="primary" @click="onSubmit">查询</el-button>
            <el-button class="onReset" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格区域 -->
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            align="center"
            fixed="left"
            prop="index"
            label="序号"
            width="60"
            type="index"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column align="center" prop="studentName" label="姓名" width="120"></el-table-column>
          <el-table-column align="center" prop="studentAge" label="年龄" width="120"></el-table-column>
          <el-table-column align="center" prop="studentGender" label="性别" width="120"></el-table-column>
          <el-table-column align="center" prop="studentGrade" label="年级" width="120"></el-table-column>
          <el-table-column align="center" prop="teacher" label="所属班主任" width="120"></el-table-column>
          <el-table-column align="center" prop="studentPatriarch" label="学生家长" width="120"></el-table-column>
          <el-table-column align="center" prop="studentAdress" label="家庭地址" width="300"></el-table-column>
          <el-table-column align="center" fixed="right" label="操作" width="140">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
    </el-card>
  </div>
</template>

<script>
import breadCrumb from "../../components/Breadcrumb/index";
export default {
  name: "studentInfos",
  components: {
    breadCrumb
  },
  data() {
    return {
      infos: {
        studentName: "",
        teacher: "",
        studentPatriarch: "",
        studentAdress: "",
        studentAge: "",
        studentGender: "",
        studentGrade: ""
      },
      tableData: [
        {
          studentGender: "2016-05-02",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1518 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-04",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1517 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-01",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1519 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-03",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1516 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-03",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1516 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-03",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1516 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-03",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1516 弄",
          studentAge: 200333
        },
        {
          studentGender: "2016-05-03",
          studentName: "王小虎",
          teacher: "上海",
          studentGrade: "一年级",
          studentPatriarch: "普陀区",
          studentAdress: "上海市普陀区金沙江路 1516 弄",
          studentAge: 200333
        }
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      loading: false
    };
  },
  methods: {
    onSubmit() {
      this.getStudentInfos();
    },
    onReset() {
      this.infos.studentClass = "";
      this.infos.teacher = "";
      this.infos.studentPatriarch = "";
      this.infos.studentAdress = "";
      this.infos.studentAge = "";
      this.infos.studentGender = "";
      this.infos.studentGrade = "";
      this.getStudentInfos(true);
    },
    handleClick(row) {
      console.log(row);
      this.$router.push("/studentInfosLook");
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    getStudentInfos(flag) {
      this.loading = true;
      console.log("获取学生信息list");
      // 模拟接口
      let num = Math.random() * 1000;
      setTimeout(() => {
        this.loading = false;
      }, num);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input,
.el-select {
  width: 180px !important;
}
.onSubmit {
  position: fixed;
  top: 270px;
  right: 190px;
}
.onReset {
  position: fixed;
  top: 270px;
  right: 110px;
}
</style>